<template>
    <view class="voucher_main">
        <view class="tab">
            <view @click="tabfn(item.val)" v-for="(item,index) in tablist" :key="index" :class="{'okbab':tablistindex==item.val}">{{item.title}}</view>
        </view>
        <view class="tabType">
            <view @click="tabTypefn(item.val)" v-for="(item,index) in tabTypelist" :key="index"  :class="{'okbabType':typeindex==item.val}">{{item.title}}</view>
        </view>
        <view class="voucher_main_list" :style="{'height':(scrollHeight)+'rpx'}">
            <view v-if="tablistindex==1||tablistindex==2" style="height: 100%;">
                <scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 100%;" @scrolltolower="lower">
                    <list :list="allList" @jumpDetails="jumpDetails"></list>
                </scroll-view>
            </view>
            <view v-if="tablistindex==3" style="height: 100%;">
                <scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 100%;">
                    <view class="addClock" @click="showPopup=true">
                        <view class="addClockbnt">
                            <image src="https://txr001.zthj.net/voucher_img/append.png"></image>
                            <view class="addtitle">发放打卡或问卷</view>
                        </view>
                    </view>
                    <view class="screentitle">
                        <view class="screentitle_top" @click="isscreen=!isscreen">
                            <text v-if="screenindex == 1">进行中</text>
                            <text v-else-if="screenindex == 2">未发放</text>
                            <text v-else-if="screenindex == 3">已结束</text>
                            <text v-else>全部</text>
                            <image src="https://txr001.zthj.net/voucher_img/screen.png"></image></view>
                        <view class="screen_mian" v-if="isscreen">
                            <view @click="screenfns(index)" :class="{'okscreen':index==screenindex}" v-for="(item,index) in statuslist">{{item}}</view>
                        </view>
                    </view>
                    <view v-for="(item,index) in myList" class="mylist">
                        <view @click="viewDetail(item)">
                            <view class="list_top">
                                <view>ID:{{ item.code }}</view>
                                <view :class="{'qrtext':item.b_type == 1}">{{ item.b_type_text }}</view>
                            </view>
                            <view class="mylist_title">
				
                                    <view>{{item.b_title}}
									<text class="state-gray" v-if="item.b_join_count == 0">未发放</text>
									<text :class="'state-'+item.status" v-else-if="item.status == 1">进行中</text>
									<text :class="'state-'+item.status" v-else-if="item.status == 1">进行中</text>
									</view>
                            </view>
                            <view class="mylist_time">{{item.b_join_count == 0 ? '创建' : '发布'}}时间: {{item.b_createtime}}</view>

                        </view>
                       <view class="mylist_bottom">
                            <view class="my_bntlist">
                                <view class="nmbers">{{ item.b_join_count}}</view>
                                <view class="texts">发放人数</view>
                            </view>
						<!-- 	//0=暂停 1=进行中 2=已结束 3=未发放 -->

                            <view v-if="item.time_status == 2" class="my_bntlist notext">
                                <view  class="listimg"><image src="https://txr001.zthj.net/voucher_img/pause.png"></image></view>
                                <view class="texts" >已结束</view>
                            </view>
							<view v-if="item.time_status == 0 || item.time_status == 3" class="my_bntlist"  :class="{'notextstre':item.time_status==3}" @click="stop(item.b_s_id, index)"  >
							    <view  class="listimg"><image src="https://txr001.zthj.net/voucher_img/initiate.png"></image></view>
							    <view class="texts">开始</view>
							</view>
                           <view v-if="item.time_status == 1" class="my_bntlist" @click="finish(item.b_s_id)"  :class="{'notextred':item.time_status==1}">
                               <view  class="listimg"><image src="https://txr001.zthj.net/voucher_img/pause1.png"></image></view>
                               <view class="texts">结束</view>
                           </view>


                            <view v-if="item.time_status == 1 || item.time_status == 0 || item.time_status == 3 || item.time_status == 2 " class="my_bntlist" @click="stop(item.b_s_id, index)"  :class="{'notext': item.time_status!=1}">
                                <view  class="listimg">
									<image :src="item.time_status==1?'https://txr001.zthj.net/voucher_img/pause_ok.png':'https://txr001.zthj.net/voucher_img/pause_no.png'"></image>
								</view>
                                <view class="texts">暂停</view>
                            </view>
                            <view class="my_bntlist"  @click="send(item.b_s_id, index)"  :class="{'notext':item.time_status==2}">
                                <view  class="listimg"><image :src="item.time_status==2?'https://txr001.zthj.net/voucher_img/share_no.png':'https://txr001.zthj.net/voucher_img/share.png' "></image></view>
                                <view class="texts">发放</view>
                            </view>
                            <view class="my_bntlist" @click="editInfo(index)" :class="{'notext':item.time_status==1 || item.time_status==2}">
                            <view  class="listimg"><image :src="item.time_status==1 || item.time_status==2?'https://txr001.zthj.net/voucher_img/edit_no.png':'https://txr001.zthj.net/voucher_img/edit.png'"></image></view>
                            <view class="texts">编辑</view>
                            </view>
                            <view class="my_bntlist" @click="delStatistics(item.b_s_id, index)"  :class="{'notext':item.time_status==2 || item.time_status==1}">
                                <view  class="listimg"><image :src="item.time_status==2 || item.time_status==1?'https://txr001.zthj.net/voucher_img/delete_no.png':'https://txr001.zthj.net/voucher_img/delete.png'"></image></view>
                                <view class="texts">删除</view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <u-popup v-model="showPopup" mode="center" class="showPopupStyl">
                <view class="selectiveRelease">
                    <view class="selective_mian">
                        <view class="selective_title">选择发放类型</view>
                        <view class="selective_list">
                            <view class="li" @click="tofound(1)">
                                <image class="bg" src="https://txr001.zthj.net/voucher_img/daimgbg.png"></image>
                                <view class="libots">
                                    <image src="https://txr001.zthj.net/voucher_img/dakaicon.png"></image>
                                    <view>打卡</view>
                                </view>
                            </view>
                            <view class="li"  @click="tofound(2)">
                                <image class="bg" src="https://txr001.zthj.net/voucher_img/qrimgbg.png"></image>
                                <view class="libots">
                                    <image src="https://txr001.zthj.net/voucher_img/qricon.png"></image>
                                    <view>问卷</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <image class="delicon" @click="showPopup=false" src="https://txr001.zthj.net/voucher_img/delicon.png"></image>
                </view>
            </u-popup>
            <u-modal v-model="showmodal" @confirm="confirm"  :title="modalTitle" confirm-color="#24458E"  :show-cancel-button="true" :confirm-text="confirmText" :confirm-style="confirmStyle">
                <view class="slot-content">
                    <view class="modalTitles">结束后发布的任务将取消，无法填写 </view>
                </view>
            </u-modal>

        </view>
    </view>
</template>

<script>
import list from '../../components/voucher-component/list' //列表
export default {
    components: {
        list
    },
    data() {
        return {
			screenindex:0,
			statuslist:["全部","进行中","未发放","已结束"],
            myList:[],
            allList:[],
            confirmStyle:{
                borderLeft:"1px solid #EBEBEB"
            },
            confirmText:"确认",
            modalTitle:"是否结束",
            showmodal:false,
            isscreen:false,
            showPopup:false,
            scrollTop:0,
            scrollHeight:0,
            tablist:[
                {title:"当前",val:1},
                {title:"往期",val:2},
                {title:"我的",val:3}
            ],
            tablistindex:1,
            tabTypelist:[
                {title:"所有",val:0,numer:12},
                {title:"打卡",val:2,numer:12},
                {title:"问卷",val:1,numer:12}
            ],
            typeindex:0,
            voucherlist:[
                {type:1,isok:0,isFulfil:true},
                {type:1,isok:1,isFulfil:false},
                {type:2,isok:1,isFulfil:true},
                {type:2,isok:1,isFulfil:false}
            ]
        }
    },
    onLoad() {
        let that=this
        this.$nextTick(function(){
            uni.getSystemInfo({
                success(res) {
                    const query = uni.createSelectorQuery();
                    query.select('.voucher_main_list').boundingClientRect(data => {
                        console.log(res)
                        console.log(data)

                        that.scrollHeight=(res.windowHeight-data.top)*2
                    }).exec();
                }
            })
        })
    },
    onShow() {
        if(this.tablistindex == 3){
            this.my();
        }else{
            this.list();
        }
    },
    methods:{
		screenfns(index){
			this.screenindex=index
			this.isscreen=false
            this.my();
		},
        tofound(type){
			this.showPopup=false
            uni.navigateTo({
                url:"/subpackage/pages/voucher/found?type="+type
            })
        },
        tabfn(val){
            this.typeindex=0
            this.tablistindex=val
            if(val == 3){
                this.my();
            }else{
                this.list();
            }
        },
        tabTypefn(val){
            this.typeindex=val
            if(this.tablistindex == 3){
                this.my();
            }else{
                this.list();
            }


        },
        async my(){
            let res = await this.$api.myStatistics({
                tab_id: 'create',
                type : this.typeindex,
                status: this.screenindex
            })
            this.myList = res.data.data
        },
        async list(){
            let res = await this.$api.myStatistics({
                status: this.tablistindex,
                type : this.typeindex,
                tab_id: 'all'
            })
            this.allList = res.data.data
        },
		confirm(){
			
		},
        delStatistics(e,index){
            if(this.myList[index].time_status == 1 || this.myList[index].time_status == 2){
                return;
            }
            let that = this;
            uni.showModal({
                content:'确认删除',
                success(res) {
                    if(res.confirm == true)
                    {
                        that.$api.delStatistics({
                            s_id: e
                        }).then(()=>{
                            that.my()
                        })
                    }
                }
            })
        },
        stop(e, index){
            if(this.myList[index].time_status == 3){
                uni.navigateTo({
                    url: '/subpackage/pages/voucher/issue?s_id=' + e
                })
                return;
            }

            if(this.myList[index].time_status == 2){
                return;
            }
            let that = this;
            if(this.myList[index].time_status == 1){
                uni.showModal({
                    title: '是否暂停',
                    content: '暂停后任务将无法填写',
                    success(res) {
                        if (res.confirm) {
                            that.$api.stopStatistics({
                                s_id: e
                            }).then(()=>{
                                that.my()
                            })
                        }
                    }
                });
                return;
            }

            that.$api.stopStatistics({
                s_id: e
            }).then(()=>{
                that.my()
            })
        },
        finish(e){
            let that = this;
            uni.showModal({
                content:'确认结束',
                success(res) {
                    if(res.confirm == true)
                    {
                        that.$api.finishStatistics({
                            s_id: e
                        }).then(()=>{
                            that.my()
                        })
                    }
                }
            })

        },
        send(e, index){
            if(this.myList[index].time_status == 2){
                return;
            }
            uni.navigateTo({
                url: '/subpackage/pages/voucher/issue?s_id=' + e
            })
        },
        editInfo(index){
            if(this.myList[index].time_status == 1 || this.myList[index].time_status == 2){
                return;
            }
            uni.navigateTo({
                url:"/subpackage/pages/voucher/found?type="+ (this.myList[index].b_type == 1 ? 2 : 1) + "&edit_id=" + this.myList[index].b_s_id
            })
        },
        lower(){

        },
        jumpDetails(row){
            if(
                row.b_type == 1 && (row.is_submit > 0 || row.status == 2)
            ){
                uni.navigateTo({
                    url:"/subpackage/pages/voucher/completeClock?type="+row.type + "&join_id="+row.is_submit
                })
            }else if(row.time_status == 0){
                uni.showToast({title:'当前任务已暂停'})
            }else{
                uni.navigateTo({
                    url:"/subpackage/pages/voucher/edit?type="+(row.b_type == 1 ? 2 : 1)+ "&id="+row.s_id + "&help_id=" + (row.is_help ? row.log_id : 0)
                })
            }
        },
        viewDetail(row){
            uni.navigateTo({
                url:"/subpackage/pages/voucher/details?s_id=" + row.b_s_id+"&type="+row.b_type
            })
        }
    }
}
</script>

<style lang="less" scoped>
.voucher_main{
    padding: 0 32rpx;
}
.tab{
    padding-top: 32rpx;
    padding-bottom: 26rpx;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #D9D9D9;
    view{
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #010101;
        line-height: 50rpx;
        margin-right: 100rpx;
    }
    .okbab{
        font-weight: 600;
        position: relative;
        &::after{
            content: "";
            position: absolute;
            bottom: -26rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 96rpx;
            height: 8rpx;
            background: #010101;
            border-radius: 0rpx 0rpx 0rpx 0rpx;
        }
    }
}
.tabType{
    display: flex;
    padding-top: 24rpx;
    align-items: center;
    view{
        min-width: 160rpx;
        line-height: 56rpx;
        background: #fff;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        text-align: center;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #010101;
        margin-right: 16rpx;
    }
    .okbabType{
        background: #24458E;
        color: #fff;
    }
}
.voucher_main_list{
    padding: 32rpx 0;
    .addClock{
        width: 100%;
        height: 202rpx;
        border-radius: 48rpx 48rpx 48rpx 48rpx;
        border: 2rpx dashed #D9D9D9;
        display: flex;
        align-items: center;
        justify-content: center;
        .addClockbnt{
            text-align: center;
            image{
                width: 48rpx;
                height: 48rpx;
                margin-bottom: 24rpx;
            }
            .addtitle{
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #010101;
                line-height: 28rpx;
            }
        }

    }
    .screentitle{
        position: relative;
        .screentitle_top{
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #010101;
            line-height: 32rpx;
            padding-top: 24rpx;
            padding-bottom: 26rpx;
            display: flex;
            align-items: center;
            image{
                width: 32rpx;
                height: 32rpx;
                display: inline-block;
                margin-left: 16rpx;
            }
        }
        .screen_mian{
            background: #FFFFFF;
            border-radius: 16rpx;
            padding-left: 32rpx;
            width: 172rpx;
            position: absolute;
            left: 0rpx;
            top: 85rpx;
            z-index: 9;
            view{
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #222222;
                line-height: 28rpx;
                &:first-child{
                    padding-top: 32rpx;
                    position: relative;
                    &::after{
                        content: "";
                        width: 0rpx;
                        height: 0rpx;
                        border: 20rpx solid;
                        border-radius: 0rpx 0rpx 0rpx 0rpx;
                        border-color: transparent transparent #FFFFFF transparent;
                        position: absolute;
                        top: -40rpx;
                        left: 35%;
						transform: translateX(-50%);
                    }
                }
                padding-bottom: 40rpx;
            }
            .okscreen{
                color: #24458E;
                font-weight: 500;
            }
        }

    }
    .mylist{
        background: #FFFFFF;
        border-radius: 48rpx 48rpx 48rpx 48rpx;
        padding: 32rpx;
        margin-bottom: 32rpx;
        .list_top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24rpx;
            view{
                &:first-child{
                    font-size: 24rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    line-height: 32rpx;
                }
                &:last-child{
                    padding: 0 10rpx;
                    line-height: 32rpx;
                    background: #0FBC77;
                    border-radius: 16rpx 16rpx 16rpx 16rpx;
                    font-size: 20rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 600;
                    color: #FFFFFF;
                }
                &.qrtext{
                    background: #5367FA;
                }
            }

        }

        .mylist_title{
            font-size: 32rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            color: #010101;
            line-height: 38rpx;
   //          display: flex;
   //          align-items: center;
			// justify-content: space-between;
			overflow: hidden;
			view{
				// flex: 1;
				float: left;
				text{
				    display: inline-block;
				    margin-left: 16rpx;
				    width: 72rpx;
				    height: 32rpx;
				    line-height: 32rpx;
				    text-align: center;
				    border-radius: 0;
				    border: 2rpx solid #24458E;
				    font-size: 20rpx;
				    font-weight: 600;
				    color: #24458E;
				}
			}
            
            .state-0{border-color:#ccc;color:#ccc}
            .state-2{border-color:#ccc;color:#ccc}
            .state-gray{border-color:#ccc;color:#ccc}
            .texton{
                color: #BBBBBB;
                border-color: #BBBBBB;
            }
        }
        .mylist_time{
            margin-top: 8rpx;
            margin-bottom: 32rpx;
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #767879;
            line-height: 28rpx;
        }
        .mylist_bottom{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 24rpx;
            border-top: 2rpx solid #D9D9D9;
            .my_bntlist{
                flex: 1;
				text-align: center;
                &:first-child{
                    width: 190rpx;
					flex: inherit;
                }
                .nmbers{
                    font-size: 40rpx;
                    font-family: Oswald, Oswald;
                    font-weight: 500;
                    color: #010101;
                    line-height: 48rpx;
                    margin-bottom: 8rpx;
                }
                .listimg{
                    width: 48rpx;
                    height: 48rpx;
                    display: block;
					margin: 0 auto;
                    margin-bottom: 8rpx;
                    image{
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }
                .texts{
                    font-size: 20rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    color: #010101;
                    line-height: 23rpx;
                }
            }
			.notext{
				.texts{
				    font-size: 20rpx;
				    font-family: PingFang SC, PingFang SC;
				    font-weight: 400;
				    color: #BBBBBB;
				    line-height: 23rpx;
				}
			}
			.notextred{
				.texts{
				    font-size: 20rpx;
				    font-family: PingFang SC, PingFang SC;
				    font-weight: 400;
				    color: #EC6969;
				    line-height: 23rpx;
				}
			}
			.notextstre{
				.texts{
				    font-size: 20rpx;
				    font-family: PingFang SC, PingFang SC;
				    font-weight: 400;
				    color: #24458E;
				    line-height: 23rpx;
				}
			}
        }
    }
}
.showPopupStyl{
    /deep/.u-mode-center-box{
        background-color:transparent;
    }
}
.selectiveRelease{
    position: relative;
    width: 690rpx;
    .selective_mian{
        background: #FFFFFF;
        border-radius: 52rpx 52rpx 52rpx 52rpx;
        padding: 43rpx 34rpx;
        .selective_title{
            font-size: 35rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #010101;
            line-height: 41rpx;
            margin-bottom: 34rpx;
        }
        .selective_list{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .li{
                width: 296rpx;
                height: 114rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                .bg{
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                }
                .libots{
                    position: relative;
                    text-align: center;
                    image{
                        width: 48rpx;
                        height: 48rpx;
                        display: block;
                        margin-bottom: 9rpx;
                    }
                    view{
                        font-size: 26rpx;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 31rpx;
                    }
                }
            }
        }
    }
    .delicon{
        margin: 0 auto;
        width: 64rpx;
        height: 64rpx;
        margin-top: 34rpx;
        display: block;
    }
}
.modalTitles{
    text-align: center;
    padding: 43rpx 0 57rpx 0 ;
    font-size: 35rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height:110rpx;
    border-bottom: 2rpx solid #EBEBEB;
}
</style>